<div class="container">
	<div class="row">
		<div class="col-6">
			<div class="widget row">
				<div class="col-3 text-center">
					<i class="fa fa-address-card-o"></i>
				</div>
				<div class="col-66 text-right">
					<p>新增客户</p>
					<h1 class="font-bold">260</h1>
				</div>
			</div>
		</div>
		<div class="col-6">
			<div class="widget flat-info row">
				<div class="col-3 text-center">
					<i class="fa fa-handshake-o"></i>
				</div>
				<div class="col-66 text-right">
					<p>最新成交</p>
					<h1 class="font-bold">1230</h1>
				</div>
			</div>
		</div>
		<div class="col-6">
			<div class="widget flat-warning row">
				<div class="col-3 text-center">
					<i class="fa fa-check-square-o"></i>
				</div>
				<div class="col-66 text-right">
					<p>新增任务</p>
					<h1 class="font-bold">13</h1>
				</div>
			</div>
		</div>
		<div class="col-6">
			<div class="widget flat-success row">
				<div class="col-3 text-center">
					<i class="fa fa-envelope-o"></i>
				</div>
				<div class="col-66 text-right">
					<p>消息</p>
					<h1 class="font-bold">220</h1>
				</div>
			</div>
		</div>
		<div class="col-6">
			<div class="widget flat-danger row">
				<div class="col-3 text-center">
					<i class="fa fa-exclamation-triangle"></i>
				</div>
				<div class="col-66 text-right">
					<p>错误</p>
					<h1 class="font-bold">1</h1>
				</div>
			</div>
		</div>
		<div class="col-6">
			<div class="widget flat-disabled row">
				<div class="col-3 text-center">
					<i class="fa fa-minus-circle"></i>
				</div>
				<div class="col-66 text-right">
					<p>禁止</p>
					<h1 class="font-bold">12</h1>
				</div>
			</div>
		</div>
	</div>
	<div class="row">
		<div class="col-2">
			<div class="box">
				<div class="box-header">
					<p class="title">热力图与百度地图</p>
					<p class="sub-title">中国地图或者省份地图可使用百度前端团队提供的echarts.js。</p>
				</div>
				<div class="box-body">
					<div id="chart_map_hot" style="height: 500px;width: 100%;"></div>
				</div>
			</div>
		</div>
		<div class="col-2">
			<div class="box">
				<div class="box-header">
					<p class="title">点亮图</p>
					<p class="sub-title">中国地图或者省份地图可使用百度前端团队提供的echarts.js。</p>
				</div>
				<div class="box-body">
					<div id="chart_map_light" style="height: 500px;width: 100%;"></div>
				</div>
			</div>
		</div>
	</div>
</div>

<script type="text/javascript">
	$(function() {
		getHotMap(echarts.init(document.getElementById('chart_map_hot')));
		getLightMap(echarts.init(document.getElementById('chart_map_light')));

		function getHotMap(myChart) {
			var app = {};
			myChart.showLoading();
			$.get('/static/json/echart.map.hot.json', function(data) {
				myChart.hideLoading();
				var points = [].concat.apply([], data.map(function(track) {
					return track.map(function(seg) {
						return seg.coord.concat([1]);
					});
				}));
				myChart.setOption(option = {
					animation: false,
					bmap: {
						center: [120.13066322374, 30.240018034923],
						zoom: 14,
						roam: true
					},
					visualMap: {
						show: false,
						top: 'top',
						min: 0,
						max: 5,
						seriesIndex: 0,
						calculable: true,
						inRange: {
							color: ['blue', 'blue', 'green', 'yellow', 'red']
						}
					},
					series: [{
						type: 'heatmap',
						coordinateSystem: 'bmap',
						data: points,
						pointSize: 5,
						blurSize: 6
					}]
				});
				if (!app.inNode) {
					// 添加百度地图插件
					var bmap = myChart.getModel().getComponent('bmap').getBMap();
					bmap.addControl(new BMap.MapTypeControl());
				}
			});
		}

		function getLightMap(myChart) {
			myChart.showLoading();
			$.get('/static/json/echart.map.light.json', function(weiboData) {
				myChart.hideLoading();
				weiboData = weiboData.map(function(serieData, idx) {
					var px = serieData[0] / 1000;
					var py = serieData[1] / 1000;
					var res = [
						[px, py]
					];
					for (var i = 2; i < serieData.length; i += 2) {
						var dx = serieData[i] / 1000;
						var dy = serieData[i + 1] / 1000;
						var x = px + dx;
						var y = py + dy;
						res.push([x.toFixed(2), y.toFixed(2), 1]);
						px = x;
						py = y;
					}
					return res;
				});
				myChart.setOption(option = {
					backgroundColor: '#404a59',
					tooltip: {},
					legend: {
						left: 'left',
						data: ['强', '中', '弱'],
						textStyle: {
							color: '#ccc'
						}
					},
					geo: {
						map: 'china',
						label: {
							emphasis: {
								show: false
							}
						},
						itemStyle: {
							normal: {
								areaColor: '#323c48',
								borderColor: '#111'
							},
							emphasis: {
								areaColor: '#2a333d'
							}
						}
					},
					series: [{
						name: '弱',
						type: 'scatter',
						coordinateSystem: 'geo',
						symbolSize: 1,
						large: true,
						itemStyle: {
							normal: {
								shadowBlur: 2,
								shadowColor: 'rgba(37, 140, 249, 0.8)',
								color: 'rgba(37, 140, 249, 0.8)'
							}
						},
						data: weiboData[0]
					}, {
						name: '中',
						type: 'scatter',
						coordinateSystem: 'geo',
						symbolSize: 1,
						large: true,
						itemStyle: {
							normal: {
								shadowBlur: 2,
								shadowColor: 'rgba(14, 241, 242, 0.8)',
								color: 'rgba(14, 241, 242, 0.8)'
							}
						},
						data: weiboData[1]
					}, {
						name: '强',
						type: 'scatter',
						coordinateSystem: 'geo',
						symbolSize: 1,
						large: true,
						itemStyle: {
							normal: {
								shadowBlur: 2,
								shadowColor: 'rgba(255, 255, 255, 0.8)',
								color: 'rgba(255, 255, 255, 0.8)'
							}
						},
						data: weiboData[2]
					}]
				});
			});
		}
	});
</script>